<template>
  <div style="padding-bottom: 50px">
    <van-sticky>
      <div class="header">
        <van-icon name="arrow-left" @click="clickBack" />
        <p class="pressTxt">地铁咨询</p>
        <div></div>
      </div>
    </van-sticky>
    <van-tabs v-model="active" @click="changeContent">
      <van-tab :title="item.name" v-for="item in categoryList" :key="item.id">
        <van-cell
          v-for="item1 in list"
          :key="item1.id"
          class="pressCell"
          @click="pressDetail(item1.id)"
        >
          <h1 class="pressTitle">{{ item1.title }}</h1>
          <div class="pressTime">{{ item1.createTime }}</div>
          <div class="ImgContent">
            <img class="pressImg" :src="'http://218.7.112.123:10001/' + item1.cover" />
            <p class="contentTxt" v-html="item1.content"></p>
          </div>
        </van-cell>
      </van-tab>
    </van-tabs>
  </div>
</template>

<script>
import { PressCategoryApi } from "@/service/metro/metroservice.js";
// import { PressCommentListApi } from "@/service/metro/metroservice.js";
import { PressPressListApi } from "@/service/metro/metroservice.js";
export default {
  data() {
    return {
      categoryList: [],
      active: 0,
      list: [],
      total: 0,
    };
  },
  methods: {
    async pressCategory() {
      let { data } = await PressCategoryApi();
      console.log(data);
      if (data.code == 200) {
        this.categoryList = data.data;
        this.pressList(this.categoryList[0].id);
      }
    },
    async pressList(type) {
      console.log(this.categoryList);
      let { data } = await PressPressListApi({ type });
      console.log(data);
      if (data.code == 200) {
        this.list.push(...data.rows);
      }
    },
    changeContent(val) {
      this.list = [];
      this.pressList(this.categoryList[val].id);
    },
    clickBack() {
      this.$router.go(-1);
    },
    pressDetail(id) {
      this.$router.push({path: '/pressdetail', query: {id}})
    },
  },
  created() {
    this.pressCategory();
  },
};
</script>

<style lang="scss" scoped>
.header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px;

  .pressTxt {
    margin-left: -25px;
  }
}

.pressCell {
  // display: flex;
  margin-bottom: 30px;

  .pressTitle {
    overflow: hidden;
    width: 90%;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .ImgContent {
    .pressImg {
      width: 40%;
      margin: 5px 10px 5px 0px;
    }

    .contentTxt {
      line-height: 18px;
      overflow: hidden;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-line-clamp: 3;
      -webkit-box-orient: vertical;
    }
  }
}
</style>